<template>
	<div class="register">
		<div class="registerForm">
			<div class="registerForm-title">
				<img class="registerForm-titleLogo" src="../images/logo.png">
				<span class="registerForm-titleText">Joe Project</span>
				<div class="clear"></div>
			</div>
			<div class="registerForm-subtitle">Joe Project 是一个比Ant Pro 更美的模拟产品</div>
			<div class="registerForm-thirdTitle">注册</div>
			<inputComponent placeholderText="邮箱" class="mb25"></inputComponent>
			<inputComponent placeholderText="至少六位密码，区分大小写" class="mb25"></inputComponent>
			<inputComponent placeholderText="确认密码" class="mb25"></inputComponent>
			<inputComponent placeholderText="11位手机号" class="mb25"></inputComponent>
			<div class="inputGroup">
				<input type="text" class="codeInput fl" placeholder="请输入验证码">	
				<downCount class="downCountBtn"></downCount>
				<div class="clear"></div>
			</div>
			<div class="wid100">
				<button class="sureRegister">注册</button>
				<router-link to="login" class="useAlreadyAccount">使用已有账户登录</router-link>
				<div class="clear"></div>
			</div>
		</div>
		<div class="footer">
			<div>
				<span class="mr20">帮助</span>
				<span class="mr20">隐私</span>
				<span>条款</span>
			</div>
			<div>Copyright  <span class="iconfont icon-copyright"></span>2017 蚂蚁金服体验技术部出品</div>
		</div>
	</div>
</template>

<script>
import inputComponent from '../components/inputC';
import downCount from '../components/downCount';

export default {
	components:{
		inputComponent,
		downCount
	},
	data() {
		return {
			mailPlaceholder:'邮箱',
		};
	}
};
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
    .register{
		width: 100vw;
		height: 100vh;
		background: url(../images/loginBg.svg) no-repeat;
		background-size: 100%;
		background-position: center;
		position: relative;
		.registerForm{
			width: 370px;
			min-height: 200px;
			position: absolute;
			top: 10%;
			left: 50%;
			margin-left: -185px;
			text-align: center;
			.registerForm-title{
				line-height: 50px;
				height: 50px;
				display: inline-block;
				.registerForm-titleLogo {
					width: 45px;
					height: 45px;
					padding-top: 2.5px;
					float: left;
				}
				.registerForm-titleText{
					font-size: 33px;
					color: rgba(0, 0, 0, 0.85);
					font-family: "Myriad Pro", "Helvetica Neue", Arial, Helvetica, sans-serif;
					font-weight: 600;
					float: left;
				}
			}
			.registerForm-subtitle {
				font-size: 14px;
				color: rgba(0, 0, 0, 0.45);
				margin-top: 5px;
				margin-bottom: 40px;
			}
			.registerForm-thirdTitle{
				font-size: 16px;
				font-weight: 700;
				line-height: 40px;
				text-align: left;
				margin-bottom: 5px;
			}
			.inputGroup{
				width: 100%;
				position: relative;
				margin-bottom:20px;
				text-align: left;
				input{
					width: 100%;
					height: 40px;
					box-sizing: border-box;
					padding-left: 10px;
					font-size: 14px;
					border-radius: 4px;
				}
				.codeInput{
					width: 235px;
					margin-right: 15px;
				}
				.codeBtn{
					width: 120px;
					height: 40px;
					color: #666;
					background-color: #fff;
					border: 1px solid #bfcbd9;
					box-sizing: border-box;
					border-radius: 0;
					font-size: 14px;
				}
				.downCountBtn{
					border-radius: 4px;
				}
			}
			.sureRegister{
				color: #fff;
				background-color: #1890ff;
				border-color: #1890ff;
				width:50%;
				height: 40px;
				font-size: 14px;
				float: left;
			}
			.useAlreadyAccount{
				width: 50%;
				color: #1890ff;
				background-color: transparent;
				border-color: transparent;
				line-height: 40px;
				text-align: right;
				font-size: 14px;
				float: left;
			}
		}
		.footer{
			font-size: 14px;
			width: 100%;
			position: fixed;
			text-align: center;
			bottom:20px;
			left: 0;
			line-height: 30px;	
		}
	}
</style>

